<template>
    <div 
        class="content-layer h-full"
        :class="{
            isHidde:!dataviewLayoutState.isShowLayer
        }"
        :style="{
            width:topWidth+'px',
        }"
    >
        <header class="title flex items-center">
            图层<Iconfy icon="mingcute:layer-fill"/>
        </header>
        <div class="layer-list">
            <div class="layer-item mb-2" v-for="item in 30" @click="handleLayerClick">
                <div class="show mr-4">
                    <img :src="nf" alt="">
                </div>
                <div class="layout-title flex items-center">
                    图层{{ item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { withDefaults,reactive } from 'vue';
import Iconfy from '@/components/Iconify/index.vue'
import {useDataViewLayoutStore} from '@/stores/dataviewLayout'
import { storeToRefs } from 'pinia';
import nf from '@/assets/images/image-404.png'

withDefaults(defineProps<{
    topWidth?:number|string
}>(),{
    topWidth:200
})

const dataViewLayoutStore = useDataViewLayoutStore()
const {dataviewLayoutState} = storeToRefs(dataViewLayoutStore)

const state = reactive({

})
const handleLayerClick = () => {
    console.log('点击图层')
}
</script>

<style lang="scss" scoped>
.isHidde{
    width: 0!important;
    opacity: 0;
}
.content-layer {
    transition: all 0.3s ease;
    .title {
        height: 40px;
        padding: 5px;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        white-space: nowrap;
    }
    .layer-list {
        height: calc(100% - 40px);
        padding: 5px;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }
        &:hover::-webkit-scrollbar {
            opacity: 1;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;
            &:hover {
                background-color: #ccc;
            }
        }

        .layer-item {
            width: 100%;
            height: 52px;
            padding: 5px;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            box-shadow: 3px 3px 6px #e6e6e6,
                       -3px -3px 6px #ffffff;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                background: linear-gradient(145deg, #f8f8f8, #ebebeb);
                transform: translateX(2px);
                box-shadow: 4px 4px 8px #e6e6e6,
                           -4px -4px 8px #ffffff;
            }

            &.active {
                background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
                border: 1px solid #e0e0e0;
                box-shadow: inset 2px 2px 5px #d9d9d9,
                           inset -2px -2px 5px #ffffff;
            }

            .show {
                width: 60px;
                height: 42px;
                border-radius: 6px;
                overflow: hidden;
                background: rgba(255, 255, 255, 0.5);
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .layout-title {
                color: #666;
                font-size: 13px;
                white-space: nowrap;
            }
        }
    }
}
</style>